<template>
  <div id="app">
    <!--router-view显示的是当前路由地址所对应的内容，比如此处对应的路由地址就是根路径-->
    <router-view />





    <!--底部-->
     <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000" >
       <router-link to="/">
        <van-tabbar-item class="iconfont home-icon" >
           <span class="home-icon1"> &#xe607;</span>
           <span class="home-o">首页</span>
        </van-tabbar-item>
       </router-link>
       
        <router-link to="/order/allorder">
        <van-tabbar-item  class="iconfont order-icon" >
             <span class="order-icon1">  &#xe67c; </span>
             <span class="order-o">订单</span>
        </van-tabbar-item>
         </router-link>

        <router-link to="/mine">
        <van-tabbar-item class="iconfont mine-icon" >
             <span class="mine-icon1">  &#xe624;  </span>
             <span class="mine-o">我的</span>      
           </van-tabbar-item>
        </router-link>

      </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
   data (){
        return {
            active:0
        }
    }
}
</script>

<style scoped>
.home-icon{
    font-size:20px;
    position: absolute;
    top:0;
    width:33%;
    bottom:5px;
    height:50px;
}
.home-icon1,.order-icon1,.mine-icon1{
    top:5px;
    left:50%;
    margin-left:-10%;
    position:absolute;
}
.order-icon{
    font-size:13px;
    margin-left:33%;
    position: absolute;
    top:0;
    width:33%;
    height:50px;
}
.order-icon1{
    font-size:18px;
}

.mine-icon{
  margin-left:66%;
  position: absolute;
    top:-2px;
    width:33%;
    height:50px;
}
.home-o,.order-o,.mine-o{
    font-size:14px;
     left:50%;
    margin-left:-14%;
    position:absolute;
}
.mine-icon1{
    font-size:20px;
}

</style>